<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.min.js"></script>
		<link rel="stylesheet" type="text/css" href="./js/vant-UI/index.css" />
		<script src="./js/vant-UI/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="./js/element-UI/elementUI.css" />
		<script src="./js/element-UI/elementUI.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.van-nav-bar {
				background-color: #0E90D2;
			}

			.van-nav-bar .van-icon {
				color: #0E90D2;
				background-color: #0E90D2;
			}

			.van-nav-bar__text {
				color: #FFF;
				font-weight: bolder;
			}

			.el-row {
				width: 200px;
			}

			.el-col-12 {
				width: 100%;
			}

			.right {
				width: 80%;
				padding: 20px;
			}

			.pagination {
				margin-top: 30px;
			}

			.el-table--enable-row-transition .el-table__body td {
				text-align: center;
			}

			.el-table th>.cell {
				text-align: center;
			}
			.van-search{
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div id="root">
			<van-nav-bar title="" left-text="员工管理系统" right-text="退出登录" left-arrow @click-left="onClickLeft"
				@click-right="onClickRight"></van-nav-bar>
			<div style="display: flex;flex-direction: row;">
				<el-row class="tac">
					<el-col :span="12">
						<el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen"
							@close="handleClose">
							<el-menu-item index="1" @click="choose(index=1)">
								<i class="el-icon-user-solid"></i>
								<span slot="title">个人信息</span>
							</el-menu-item>
							<el-menu-item index="4" @click="choose(index=5)">
								<i class="el-icon-question"></i>
								<span slot="title">修改密码</span>
							</el-menu-item>
						</el-menu>
						<van-calendar title="日历" :poppable="false" :show-confirm="false" :style="{ height: '300px' }"
							:show-title="false" :row-height="48" />
					</el-col>
				</el-row>
				<div v-if="manage == 1" class="right">
					<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
						<el-breadcrumb-item>首页</el-breadcrumb-item>
						<el-breadcrumb-item>个人信息</el-breadcrumb-item>
						
					</el-breadcrumb>
					<!-- <a href="mydetail/index.html"></a> -->
					<embed style="width: 100%;height: 800px;" src="mydetail/index.html"></embed>
				</div>
				
				<div v-if="manage == 3" class="right">
					<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
						<el-breadcrumb-item>首页</el-breadcrumb-item>
						<el-breadcrumb-item>人事管理</el-breadcrumb-item>
						<el-breadcrumb-item>用户管理</el-breadcrumb-item>
					</el-breadcrumb>
					<el-row style="display: flex;flex-direction: row;margin-bottom: 20px;">
						<el-button type="primary" @click="addroot">添加管理员</el-button>
					</el-row>
					<template>
						<el-table :data="tableData_sys" border style="width: 100%">
							<el-table-column type="selection" width="55"></el-table-column>
							<el-table-column fixed prop="id" label="ID" width="100">
							</el-table-column>
							<el-table-column prop="name" label="角色名称" width="100">
							</el-table-column>
							<el-table-column prop="date" label="添加时间" width="100">
							</el-table-column>
							<el-table-column prop="sex" label="角色描述" width="400">
							</el-table-column>
							<el-table-column fixed="right" label="操作" width="400">
								<template slot-scope="scope">
									<el-button size="mini" @click="handleEdit_root(scope.$index, scope.row)">编辑
									</el-button>
									<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">分配权限
									</el-button>
									<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
										删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</template>
					<el-pagination class="pagination" background layout="prev, pager, next" :total="1000">
					</el-pagination>
				</div>
				<div v-if="manage == 5" class="right">
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item>首页</el-breadcrumb-item>
						<el-breadcrumb-item>修改密码</el-breadcrumb-item>
					</el-breadcrumb>
					<van-form style="width: 300px;margin-top: 100px;margin-left: 500px;border: 1px solid #000000;"
						@submit="onSubmit">
						<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
							:rules="[{ required: true, message: '请填写用户名' }]"></van-field>
						<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
							:rules="[{ required: true, message: '请填写密码' }]"></van-field>
						<div style="margin: 16px;">
							<van-button round block type="info" native-type="submit">提交</van-button>
						</div>
					</van-form>
				</div>
			</div>
			<van-dialog v-model="show_depart" title="添加部门" confirm-button-text="取消">
				<van-form @submit="onSubmit">
					<van-field v-model="adddepart.name" name="用户名" label="部门名称" placeholder="部门名称"
						:rules="[{ required: true, message: '请填写用户名' }]"></van-field>
					<van-field v-model="adddepart.detail" name="用户名" label="详细信息" placeholder="详细信息"
						:rules="[{ required: true, message: '请填写用户名' }]"></van-field>
					<div style="margin: 16px;">
						<van-button round block type="info" native-type="submit">提交</van-button>
					</div>
				</van-form>
			</van-dialog>
			<van-dialog v-model="show_staff" title="添加人员" confirm-button-text="取消">
				<van-form @submit="onSubmit">
					<van-field v-model="addstaffs.name" name="姓名" label="姓名" placeholder="姓名"
						:rules="[{ required: true, message: '请填写用户名' }]"></van-field>
					<van-field v-model="addstaffs.gender" name="性别" label="性别" placeholder="男/女"
						:rules="[{ required: true, message: '请填写用户名' }]"></van-field>
					<van-field v-model="addstaffs.depart" name="用户名" label="部门" placeholder="部门"
						:rules="[{ required: true, message: '请填写用户名' }]"></van-field>
					<van-field v-model="addstaffs.email" name="用户名" label="邮箱" placeholder="邮箱"
						:rules="[{ required: true, message: '请填写用户名' }]"></van-field>
					<van-field v-model="addstaffs.wages" name="用户名" label="工资" placeholder="工资"
						:rules="[{ required: true, message: '请填写用户名' }]"></van-field>
					<van-field v-model="addstaffs.city" name="用户名" label="籍贯" placeholder="籍贯"
						:rules="[{ required: true, message: '请填写用户名' }]"></van-field>
					<van-field v-model="addstaffs.marriage" name="用户名" label="婚姻状况" placeholder="已婚/未婚/保密"
						:rules="[{ required: true, message: '请填写用户名' }]"></van-field>
					<div style="margin: 16px;">
						<van-button round block type="info" native-type="submit">提交</van-button>
					</div>
				</van-form>
			</van-dialog>
			<van-dialog v-model="show_root" title="添加管理员" confirm-button-text="取消">
				<van-form @submit="onSubmit">
					<van-field v-model="addrooter.name" name="姓名" label="角色名称" placeholder="角色名称"
						:rules="[{ required: true, message: '请填写用户名' }]"></van-field>
					<van-field v-model="addrooter.detail" name="性别" label="描述" placeholder="描述"
						:rules="[{ required: true, message: '请填写用户名1' }]"></van-field>

					<div style="margin: 16px;">
						<van-button round block type="info" native-type="submit">提交</van-button>
					</div>
				</van-form>
			</van-dialog>
			<van-dialog v-model="show_delete" title="确认删除" show-cancel-button>
				<div style="margin-left: 30px;line-height: 50px;">您即将删除 <span style="color: red;font-weight: bold;">{{delete_text}}</span> 的全部信息</div>
				
			</van-dialog>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#root",
			data: {
				delete_text:'',
				value_search: '',
				show_depart: false,
				show_staff: false,
				show_root: false,
				show_delete:false,
				username: '',
				password: '',
				isCollapse: true,
				daohang1: "人事管理",
				daohang2: "部门管理",
				tableData_bumen: [{
					id: '1',
					name: '人事部',
					num: '50',
					date: '2021/09/22',
					detail: '12123131'

				}, {
					id: '2',
					name: '研发部',
					num: '50',
					date: '2021/09/22',
					detail: '12123131'
				}, {
					id: '3',
					name: '产品部',
					num: '50',
					date: '2021/09/22',
					detail: '12123131'
				}, {
					id: '4',
					name: '	测试部',
					num: '50',
					date: '2021/09/22',
					detail: '12123131'
				}, ],
				tableData_renyuan: [{
						date: '1',
						name: '张三',
						sex: '男',
						depart: '测试部',
						email: '2890682240@qq.com',
						money: '3500',
						city: '盘锦',
						marriage: '未婚'
					}, {
						date: '2',
						name: '李四',
						sex: '女',
						depart: '测试部',
						email: '2890682240@qq.com',
						money: '3500',
						city: '盘锦',
						marriage: '未婚'
					}, {
						date: '3',
						name: '刘小武',
						sex: '男',
						depart: '测试部',
						email: '2890682240@qq.com',
						money: '3500',
						city: '盘锦',
						marriage: '未婚'
					}, {
						date: '4',
						name: '	姜小辉',
						sex: '男',
						depart: '测试部',
						email: '2890682240@qq.com',
						money: '3500',
						city: '盘锦',
						marriage: '未婚'
					},
					{
						date: '5',
						name: '	盛小远',
						sex: '男',
						depart: '测试部',
						email: '2890682240@qq.com',
						money: '3500',
						city: '盘锦',
						marriage: '未婚'
					},
				],
				tableData_sys: [{
					id: '1',
					name: 'admin',
					sex: '系统管理员',
					depart: '测试部',
					email: '2890682240@qq.com',
					money: '3500',
					city: '盘锦',
					date: '2021/09/22'
				}, ],
				search: '',
				manage: 1,
				adddepart: [{
					name: '',
					num: '',
					detail: '',
				}],
				addstaffs: [{
					name: '',
					gender: '',
					birthday:'',
					nation: '',
					politicalOutlook:'',
					phone:'',
					email: '',
					wages: '',
					city: '',
					marriage: ''
				}],
				addrooter: [{
					name: '',
					detail: '',
				}]
			},
			methods: {
				aaa(){
					console.log("111")
				},
				onSearch() {

				},
				addroot() {
					this.addrooter = []
					this.show_root = true
				},
				addstaff() {
					this.addstaffs = []
					this.show_staff = true
				},
				adddeaprt() {
					this.adddepart = []
					this.show_depart = true
				},
				onSubmit(values) {

					console.log('submit', values)
				},
				choose(index) {
					console.log(index)
					if (index == 1) {
						this.manage = 1
					}
					if (index == 2) {
						this.manage = 2
					}
					if (index == 3) {
						this.manage = 3
					}
					if (index == 5) {
						this.manage = 5
					}
				},
				handleSelectionChange() {

				},
				handleEdit_root(index, row) {
					this.addrooter.name = this.tableData_sys[index].name

					this.addrooter.detail = this.tableData_sys[index].sex
					this.show_root = true
				},
				handleEdit_depart(index, row) {
					this.adddepart.name = this.tableData_bumen[index].name
					this.adddepart.num = this.tableData_bumen[index].num
					this.adddepart.detail = this.tableData_bumen[index].detail
					this.show_depart = true
				},
				handleEdit(index, row) {
					console.log(index, row);
					this.addstaffs.name = this.tableData_renyuan[index].name
					this.addstaffs.sex = this.tableData_renyuan[index].sex
					this.addstaffs.depart = this.tableData_renyuan[index].depart
					this.addstaffs.email = this.tableData_renyuan[index].email
					this.addstaffs.wages = this.tableData_renyuan[index].money
					this.addstaffs.city = this.tableData_renyuan[index].city
					this.addstaffs.marriage = this.tableData_renyuan[index].marriage
					this.show_staff = true
				},
				handleDelete(index, row) {
					console.log(index, row);
					this.delete_text = row.name
					this.show_delete = true
				},
				onClickLeft() {

				},
				onClickRight() {

				},
				handleOpen(key, keyPath) {
					console.log(key, keyPath);
				},
				handleOpen2(key, keyPath) {
					console.log(key, keyPath);
				},
				handleClose(key, keyPath) {
					console.log(key, keyPath);
				}
			},
			mounted() {

			}
		})
	</script>
</html>
